<template>
  <div>
    <el-card style="height: 470px; width: 98%; margin: 0 0 12px 12px">
      <div style="margin: 15px 15px 30px 15px">
        <!-- <span style="font-size: 14px;color: #606266;">课程选择</span> -->
        <!-- <el-select size="small" v-model="choose_curriculum" @change="changeChart">
          <el-option v-for="item in curriculum" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select> -->
        <el-form ref="curriculumRef" :model="curriculumForm" label-width="90px">
          <el-form-item label="课程选择：">
            <!-- <el-input v-model="curriculumForm.curriculum"></el-input> -->
            <el-select v-model="curriculumForm.curriculum" placeholder="python语言设计">
              <el-option v-for="(item, index) in curriculums" :label="item.className" :value="item.className" :key="index"></el-option>
            </el-select>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div
        style="margin-top: -15px; height: 430px"
        v-if="echartData.length > 0"
      >
        <div
          class="echarts"
          style="width: 500px; height: 400px"
          ref="echarts"
        ></div>
        <div
          class="echarts"
          style="width: 500px; height: 400px"
          ref="echarts1"
        ></div>
        
        <!--饼状图-->
        <!-- <ve-pie  v-if="chartValue === 1" :data="pieData"></ve-pie> -->
        <!--折线图-->
        <!-- <ve-line v-if="chartValue === 2" :data="lineData" ref="chart" :width="lineWidth" :height="lineHeight"></ve-line> -->
        <!--条形图-->
        <!-- <ve-histogram  v-if="chartValue === 3" :data="histogramData" ref="chart" :height="lineHeight"></ve-histogram> -->
      </div>
      <div style="text-align: center; line-height: 335px">
        <span style="color: gray">暂无数据</span>
      </div>
    </el-card>
    <!-- <el-card class="info">
      <el-row style="">
        <el-col :span="6">总绩点：{{total.point}}</el-col>
        <el-col :span="6">总学分：{{total.credits}}</el-col>
      </el-row>
    </el-card> -->
  </div>
</template>

<script>
import { reqCrriculumAnalysis, reqGradeDetail, reqscore } from "@/api/curriculum";
export default {
  name: "dashboard",
  async mounted() {
    this.getCurriculum()

    const res = await reqCrriculumAnalysis({
        curriculum: 'python语言',
        level: this.curriculumForm.level
      });
      const res1 = await reqGradeDetail(this.curriculumForm);
      // if(res.code != 200) return this.$message.error('饼图数据获取失败！')
      // if(res1.code != 200) return this.$message.error('柱状图数据获取失败！')
      this.echartData = res.data.map((item) => {
        const obj = {
          value: item.value,
          name: item.label,
        };
        return obj;
      });

      this.searchResult = res1.data
      this.$nextTick(() => {
        this.echartsInit();
        this.echartsInit1();
      });


  },
  data() {
    return {
      mockData: [
        {
          label: "优秀",
          value: 11,
        },
        {
          label: "及格",
          value: 21,
        },
        {
          label: "良好",
          value: 10,
        },
        {
          label: "不及格",
          value: 5,
        },
      ],
      mockData1: [
        {
          label: "9",
          value: 2,
        },
        {
          label: "8",
          value: 3,
        },
        {
          label: "7",
          value: 10,
        },
        {
          label: "6",
          value: 25,
        },
        {
          label: "5",
          value: 5,
        },
        {
          label: "4",
          value: 15,
        },
        {
          label: "3",
          value: 5,
        },
        {
          label: "2",
          value: 5,
        },
        {
          label: "1",
          value: 2,
        },
      ],
      curriculumForm: {
        curriculum: "",
        level: 2,
      },
      searchResult: [],
      echartData: [],
      info: JSON.parse(localStorage.getItem('userInfo')),
      curriculums: []
    };
  },
  methods: {
    async getCurriculum() {
      const { data: res } = await reqscore({
        level: this.info.level,
        stuId: this.info.userId,
      })
      this.curriculums = res.data.items
      console.log(res, 22);
      },
    async search() {
      const res = await reqCrriculumAnalysis(this.curriculumForm);
      const res1 = await reqGradeDetail(this.curriculumForm);
      // if(res.code != 200) return this.$message.error('饼图数据获取失败！')
      // if(res1.code != 200) return this.$message.error('柱状图数据获取失败！')
      this.echartData = res.data.map((item) => {
        const obj = {
          value: item.value,
          name: item.label,
        };
        return obj;
      });

      this.searchResult = res1.data
      this.$nextTick(() => {
        this.echartsInit();
        this.echartsInit1();
      });
    },
    echartsInit() {
      let myChart = this.$echarts.init(this.$refs.echarts);
      let option = {
        title: {
          text: "统计比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.echartData,
            /* data:[
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ], */
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    echartsInit1() {
      let myChart = this.$echarts.init(this.$refs.echarts1);
      let option = {
        title: {
          text: "分数段",
          left: "center",
        },
  xAxis: {
    type: 'category',
    data: ['0-60', '60-65', '65-70', '70-75', '75-80', '80-85', '85-90', '90-95', '95-100']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: this.searchResult,
      type: 'bar',
      showBackground: true,
      itemStyle: {
              color: 'pink'
            },
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
      myChart.setOption(option);
    },
  },
  /*  methods: {
      getYear () {
        let now = new Date().getFullYear();
        let old = parseInt(this.userInfo.admissionTime);
        for (let i = old; i < now; i++) {
          if (this.yearArr.length < 4) {
            let num = i - old;
            let obj = {};
            switch (num) {
              case 0:
                obj = {label: '大一', value: i};
                break;
              case 1:
                obj = {label: '大二', value: i};
                break;
              case 2:
                obj = {label: '大三', value: i};
                break;
              case 3:
                obj = {label: '大四', value: i};
                break;
            }
            this.yearArr.push(obj);
          }
        }
        this.getDefault();
      },
      changeChart () {
        this.click();
      },
      getDefault () {
        // 获取学年和学期的初始值
        this.form.year = 2016;
        let month = new Date().getMonth()+1;
        if (month > 2 && month < 6) {
          // 上学期
          this.form.term = this.termArr[0].value;
        } else {
          // 下学期
          this.form.term = this.termArr[1].value;
        }
        this.click();
      },
      click () {
        let userInfo = JSON.parse(localStorage.userInfo);
        let obj = {
          studentName: userInfo.username,
          level: userInfo.level,
          year: this.form.year || '',
          term: this.form.term || ''
        };
        this.getChartData(obj);
        this.getPieData(obj);
      },
      getChartData (data) {
        this.axiosHelper.get(
          '/api/sms/score/export',
          {params: data}).then(response => {
          let data = response.data;
          this.lineData.rows = data.map(item => {
            let obj = {
              courseName: item.name,
              '分数': item.scoreByUser || 0
            };
            return obj
          });
          this.showChart = data.some(item => {
            return item.scoreByUser !== null
          });
          this.histogramData = this.lineData;
        }).catch(error => {
          this.$message.error({
            message: '获取成绩失败'
          }, error)
        })
      },
      getPieData (data) {
        this.axiosHelper.get(
          '/api/sms/score/getUserNum', {params: data}).then(
          response => {
            let data = response.data;
            data = data.filter(item => {
              return item.label !== '未录入'
            });
            this.pieData.rows = data;
            this.showChart = data.some(item => {
              return item.value !== 0;
            });
          }).catch(error => {
          this.$message.error({
            message: '获取饼图信息失败'
          }, error)
        })
      },
      // 获取总学分和总绩点
      getTotal () {
        let obj = {
          studentName: this.userInfo.id,
          level: this.userInfo.level,
        };
        this.axiosHelper.get(
          '/api/sms/score/getUserTotal', {params: obj}).then(
          response => {
            let obj = response.data;
            let current = {
              credits: this.dealTotal(obj.credits),
              point: this.dealTotal(obj.point)
            };
            this.total = {...current};
          })
      }
    }, */
  /*  computed: {
      collapse() {
        return this.$store.state.collapse;
      }
    },
    watch: {
      collapse() {
        setTimeout(() => {
          this.$refs['chart'].resize()
        }, 150)
      }
    },
    mounted() {
      this.userInfo = JSON.parse(localStorage.userInfo);
      this.getYear();
      this.getTotal();
    }, */
};
</script>

<style scoped>
.content {
  height: 300px;
  float: left;
}
.content:hover {
  background-color: #f5faf5;
  box-shadow: 5px 8px 6px 0px rgba(70, 88, 131, 0.2);
}
.changeChartStyle {
  margin: -4px 0 0 97.5%;
  color: #528DAB;
  font-size: 16px;
}
.changeChartStyle:hover {
  transform: scale(1.2);
  color: #F4CBCE;
}
.info {
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  box-sizing: border-box;
  width: 98%;
  margin: 0 0 0 12px;
}
/deep/ .el-input {
  width: 220px;
  margin-right: 15px;
  margin-bottom: 20px;
}
</style>
<style>
#app,
body {
  padding: 0;
  margin: 0;
}
.echarts {
  display: inline-block;
}
</style>
